import * as THREE from 'three';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
const model = new THREE.Group();
const lineGroup = new THREE.Group();//边界线组
const meshGroup = new THREE.Group();//区域填充组
const pillarMeshGroup = new THREE.Group();//柱子组

// const size = 1.2;
const mapHeight = 3
const loader = new THREE.FileLoader();
loader.setResponseType("json")
// 解析gdp文件数据
loader.load('/人口密度.json',(data)=>{ 
    var color1 = new THREE.Color(0x229977);
    var color2 = new THREE.Color(0x29ee77);//最大数值对应柱子颜色
    const maxData = 500
    var geoArr = []; //所有几何体集合
    // 柱子
    data.population.forEach((item)=>{
        const height = item[2]/100;
        const geometry = new THREE.CylinderGeometry( 0.3, 0.3, height,6);
        geometry.computeVertexNormals()
        geometry.rotateX(Math.PI/2)
        geometry.translate(item[0], item[1], height/2)
        // 获取geometry的顶点
        const vertices = geometry.attributes.position;
        // 定义顶点颜色数组
        const colorArr = []
        const color = color1.clone().lerp(color2.clone(),item[2]/maxData)
        // 每个顶点添加三个颜色值
        for(var j = 0;j<vertices.count ;j++){
            colorArr.push(color.r, color.g, color.b);
        }
        // 给每个顶点设置颜色
        geometry.attributes.color = new THREE.BufferAttribute(new Float32Array(colorArr), 3);
        geoArr.push(geometry)
    })
    // 合并几何体
    const BfferGeometry = BufferGeometryUtils.mergeBufferGeometries(geoArr);
    // 获取合并几何体的顶点
    const Bffervertices = BfferGeometry.attributes.position;
    // 获取合并几何体的颜色
    const Bffercolor = BfferGeometry.attributes.color
    // 每个顶点添加三个颜色值
    for(var i = 0;i<Bffervertices.count;i++){
        if(Bffervertices.getZ(i) <0.01){
            Bffercolor.setX(i,Bffercolor.getX(i)*0)
            Bffercolor.setY(i,Bffercolor.getY(i)*0.1)
            Bffercolor.setZ(i,Bffercolor.getZ(i)*0.1)
        }else{
            Bffercolor.setX(i,Bffercolor.getX(i)*0)
            Bffercolor.setY(i,Bffercolor.getY(i)*1.0)
            Bffercolor.setZ(i,Bffercolor.getZ(i)*1.0)
        }
    }
    console.log('Bffercolor',Bffercolor);
    // 批量产生结构体，公用一个材质
    const material = new THREE.MeshLambertMaterial( {
        // color: 0xffffff,
        vertexColors: true//使用顶点颜色渲染
    } );
    const HEBING = new THREE.Mesh( BfferGeometry, material );
    HEBING.position.z = mapHeight + 0.01
    pillarMeshGroup.add(HEBING)
})
loader.load('/world.json',(data)=>{
    data.features.forEach((area)=>{
        // coordinates数据分为单组和多组，将单组的封装为多组
        if(area.geometry.type === 'Polygon'){
            area.geometry.coordinates = [area.geometry.coordinates]
        }
        lineGroup.add(moreLine(area.geometry.coordinates,mapHeight)) 
        meshGroup.add(shapeMesh(area.geometry.coordinates,area.properties.name,area.properties.center))
    })
    // lineGroup.position.z += mapHeight + 0.01 *mapHeight
    model.add(lineGroup,meshGroup,pillarMeshGroup)
})

// 批量产生轮廓线
const moreLine = (coordinates,gdpvalue)=>{
    const groupLine = new THREE.Group();
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(elem[0],elem[1],0)
        })
        groupLine.add(oneLine(pointArr))
    });
    groupLine.position.z += gdpvalue+ 0.001*gdpvalue
    return groupLine
}
// 产生一条轮廓线
const oneLine = (pointArr)=>{
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(pointArr);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.LineBasicMaterial({
        color: 0x006666
    });
    const line = new THREE.LineLoop(geometry,material);
    return line;
}
// 产生多边形面
const shapeMesh = (coordinates,name,lngLat)=>{
    var heartShape = [];//轮廓形状Shape集合
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(new THREE.Vector3(elem[0],elem[1],0))
        })
        const shape = new THREE.Shape(pointArr);
        heartShape.push(shape)
    });
    var material = new THREE.MeshLambertMaterial({
        color: 0x004444,
        // side: THREE.DoubleSide, //两面可见
    }); //材质对象
    var geometry = new THREE.ExtrudeGeometry( heartShape ,{
        depth: mapHeight, //拉伸长度
        bevelEnabled: false //无倒角
    });
    var mesh =  new THREE.Mesh( geometry, material )
    mesh.lngLat = lngLat
    mesh.name = name
    return mesh
}

export {model};